/*
  学习目标：使用useEffect的第二个参数
  useEffect提供三个生命周期的钩子函数
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Hello React');

  useEffect(() => {
    console.log('执行了  ----->  ');
  }, []);
  // [] 代表挂载时的钩子函数， 等价于componentDidMount，

  useEffect(() => {
    console.log('执行了  ----->  ');
    // console.log('count  ----->  ', count);
    // document.title = count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
    console.log('count  ----->  ', count);
  }, [count]); // 依赖项   相当于vue中的侦听器，

  return (
    <div>
      count -- {count}
      msg -- {msg}
      <button onClick={() => setCount(count + 1)}>点我修改title</button>
      <button onClick={() => setMsg(msg + '~')}>点我修改Msg</button>
    </div>
  );
}
